<template>
  <div class="nav-container">
    <div class="nav-header">
      <div class="logo">
        <img src="@/assets/logo.svg" alt="Logo" class="logo-img">
      </div>
      <div class="user-info">
        <el-avatar :size="40" :src="userStore.avatar" class="user-avatar" />
        <span class="username">{{ userStore.username }}</span>
        <el-tag size="small" :type="roleType" class="role-tag">{{ roleName }}</el-tag>
        <el-button 
          type="text" 
          @click="handleLogout"
          class="logout-btn"
        >
          <el-icon><switch-button /></el-icon>
        </el-button>
      </div>
    </div>
    
    <el-menu
      class="nav-menu"
      :default-active="activeIndex"
      background-color="transparent"
      text-color="#e6e6e6"
      active-text-color="#ffffff"
      router
    >
      <el-menu-item index="/home">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/violation" v-if="isAdmin || isSuperAdmin">
        <el-icon><Warning /></el-icon>
        <span>违法记录</span>
      </el-menu-item>
      <el-menu-item index="/alert" v-if="isAdmin || isSuperAdmin">
        <el-icon><Bell /></el-icon>
        <span>预警中心</span>
      </el-menu-item>
      <el-menu-item index="/appeal">
        <el-icon><Document /></el-icon>
        <span>申诉管理</span>
      </el-menu-item>
      <el-menu-item index="/enforcement" v-if="isAdmin || isSuperAdmin">
        <el-icon><Stamp /></el-icon>
        <span>执法处理</span>
      </el-menu-item>
      <el-menu-item index="/user-management" v-if="isAdmin || isSuperAdmin">
        <el-icon><UserFilled /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/profile">
        <el-icon><User /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/user'
import { useRouter, useRoute } from 'vue-router'
import { employeeLogout } from '@/api/employee'
import { computed, ref } from 'vue'
import { HomeFilled, Warning, Bell, Document, Stamp, User, UserFilled } from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 计算当前激活的菜单项
const activeIndex = computed(() => route.path)

// 根据用户角色判断权限
const userRole = computed(() => userStore.userInfo?.role || '0')
const isAdmin = computed(() => userRole.value === '1')
const isSuperAdmin = computed(() => userRole.value === '2')

// 角色名称和标签类型
const roleName = computed(() => {
  switch(userRole.value) {
    case '0': return '普通用户'
    case '1': return '管理员'
    case '2': return '超级管理员'
    default: return '未知角色'
  }
})

const roleType = computed(() => {
  switch(userRole.value) {
    case '0': return 'info'
    case '1': return 'success'
    case '2': return 'danger'
    default: return 'warning'
  }
})

const handleLogout = async () => {
  // 调用后端退出接口，无论成功与否都继续执行后续操作
  employeeLogout().finally(() => {
    // 清除本地 token 和用户信息
    userStore.setToken('')
    userStore.setUserInfo({})
    // 跳转到登录页
    router.push('/login')
  })
}
</script>

<style scoped>
.nav-container {
  height: 100vh;
  background: linear-gradient(180deg, #1a2b4a 0%, #0e1a2d 100%);
  padding: 30px 0; /* 增加整体内边距 */
  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
}

.nav-header {
  padding: 0 20px 25px; /* 增加底部间距 */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
}

.logo {
  margin-bottom: 25px; /* 增加logo底部间距 */
  width: 100px; /* 固定logo宽度 */
  height: 40px; /* 固定logo高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px; /* 增加用户信息元素间距 */
  color: white;
  padding: 10px 0;
  width: 100%;
  justify-content: center; /* 用户信息居中显示 */
}

.role-tag {
  margin-left: 5px;
  font-size: 10px;
}

.nav-menu {
  border-right: none;
  margin-top: 30px; /* 增加菜单顶部间距 */
  padding: 0 10px;
}

.nav-menu .el-menu-item {
  margin: 8px 10px; /* 增加菜单项间距 */
  border-radius: 8px; /* 优化圆角 */
  padding: 12px 20px; /* 优化内边距 */
  transition: all 0.3s;
}

.logout-btn {
  margin-left: 15px; /* 增加退出按钮左侧间距 */
  color: #e6e6e6;
  padding: 5px 10px; /* 增加按钮内边距 */
  border-radius: 4px;
  transition: all 0.2s;
}

.logout-btn:hover {
  color: #ffffff;
  background-color: rgba(255,255,255,0.1);
}
</style>
.nav-menu .el-menu-item:hover {
  background-color: rgba(255,255,255,0.1);
}

.nav-menu .el-menu-item.is-active {
  background-color: rgba(24, 144, 255, 0.2);
}